<template>
  <div class="infoIntroduce">
    <van-nav-bar class="top" left-arrow title="个人介绍" @click.native="toinfo">
      <template #right>
        <div class="btnsave" @click="btnsave">保存</div>
      </template>
      <template #left>
        <span class="iconfont">&#xe632;</span>
      </template>
      <template #title>
        <span class="xiugaitouxiang">个人介绍</span>
      </template>
    </van-nav-bar>
    <van-field
      v-model="message"
      rows="2"
      autosize
      label="说点什么把！"
      type="textarea"
      maxlength="50"
      placeholder="介绍一下你自己"
      show-word-limit
    />
  </div>
</template>

<script>
import { Profile } from '@/api/my.js'
import { mapState } from 'vuex'
export default {
  name: 'infoIntroduce',
  data () {
    return {
      message: ''
    }
  },
  created () {
    console.log(this.userInfo)
  },
  methods: {
    // 调回到info页面
    toinfo () {
      this.$router.push('/info')
    },
    // 点击保存
    btnsave () {
      this.$toast.loading({
        duration: 0
      })
      this.$toast.success('修改资料成功')
      this.editlnfo({
        intro: this.message
      })
      console.log(this.userInfo)

      // this.$router.push(`/info?message=${this.message}`)
    },
    // 修改用户信
    editlnfo (obj) {
      Profile(obj).then(() => {
        this.$toast.success('修改资料成功')
        // 更新vuex中的userlnfo
        this.$store.dispatch('refreshUserInfo')
      })
    }
  },
  computed: {
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="less" scoped>
.infoIntroduce {
  .top {
    background-color: #d0584d;
  }
  .btnsave {
    color: #ffffff;
  }
  .iconfont {
    color: #ffffff;
  }
  .xiugaitouxiang {
    color: #ffffff;
  }
}
</style>
